import React from 'react';
import { Card, Col, message, Row, Statistic, Tag } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import type { DashboardItem } from '@/services/API.d';
import { dashboardInit } from '@/services/dashboard';
import { Line, Column, Pie } from '@ant-design/charts';

type StateType = {
  dashboardData: DashboardItem;
};

class Dashboard extends React.Component<any, StateType> {
  private temp: DashboardItem = {
    userCount: 0,
    sitCount: 0,
    surplusSitCount: 0,
    income: 0,
    userClassification: { common: 0, vip: 0 },
    day7Data: [],
    day30Data: [],
  };

  public state = {
    dashboardData: this.temp,
  };

  constructor(props: any) {
    super(props);
    this.init().then();
  }

  init = async () => {
    try {
      const res = await dashboardInit();
      if (res.code === 200) {
        this.setState({
          dashboardData: res.data,
        });
        message.success(res.msg);
        return true;
      }
      message.error(res.msg);
      return false;
    } catch (error) {
      message.error('获取数据失败！');
      return false;
    }
  };

  render() {
    const { dashboardData } = this.state;
    // const {ref} = this;
    const userClassificationData = [
      {
        type: '普通用户',
        value: dashboardData.userClassification.common,
      },
      {
        type: 'VIP用户',
        value: dashboardData.userClassification.vip,
      },
    ];
    const userClassificationConfig = {
      appendPadding: 10,
      data: userClassificationData,
      angleField: 'value',
      colorField: 'type',
      radius: 0.9,
      label: {
        type: 'inner',
        offset: '-50%',
        content: function content(_ref: any) {
          return ''.concat(String((_ref.percent * 100).toFixed(2)), '%');
        },
        style: {
          fontSize: 14,
          textAlign: 'center',
        },
      },
      interactions: [{ type: 'element-active' }],
    };

    const day7DataConfig = {
      data: dashboardData.day7Data,
      isStack: true,
      xField: 'date',
      yField: 'value',
      seriesField: 'type',
    };

    const day30DataConfig = {
      data: dashboardData.day30Data,
      xField: 'date',
      yField: 'value',
      label: {},
      point: {
        size: 5,
        shape: 'diamond',
        style: {
          fill: 'white',
          stroke: '#5B8FF9',
          lineWidth: 2,
        },
      },
      tooltip: { showMarkers: false },
      state: {
        active: {
          style: {
            shadowColor: 'yellow',
            shadowBlur: 4,
            stroke: 'transparent',
            fill: 'red',
          },
        },
      },
      theme: {
        geometries: {
          point: {
            diamond: {
              active: {
                style: {
                  shadowColor: '#FCEBB9',
                  shadowBlur: 2,
                  stroke: '#F6BD16',
                },
              },
            },
          },
        },
      },
      interactions: [{ type: 'marker-active' }],
    };
    return (
      <PageContainer>
        <Row gutter={[24, 16]}>
          <Col span={6}>
            <Card>
              <Statistic
                title="用户数"
                value={dashboardData.userCount}
                valueStyle={{ color: '#cf1322' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="车位数"
                value={dashboardData.sitCount}
                valueStyle={{ color: '#cf1322' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="剩余车位"
                value={dashboardData.surplusSitCount}
                valueStyle={{ color: '#cf1322' }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="今日收益"
                value={dashboardData.income}
                precision={2}
                valueStyle={{ color: '#cf1322' }}
              />
            </Card>
          </Col>
        </Row>
        <Row gutter={[24, 16]}>
          <Col span={24}>
            <Card>
              <Tag color="#2db7f5">近30天停车收益折线图</Tag>
              <Line {...day30DataConfig} />
            </Card>
          </Col>
        </Row>
        <Row gutter={[24, 16]}>
          <Col span={10}>
            <Card>
              <Tag color="#2db7f5">用户比例表</Tag>
              <Pie {...userClassificationConfig} />
            </Card>
          </Col>
          <Col span={14}>
            <Card>
              <Tag color="#2db7f5">近7天停车类型柱状图</Tag>
              <Column {...day7DataConfig} />
            </Card>
          </Col>
        </Row>
      </PageContainer>
    );
  }
}

export default Dashboard;
